<template>
  <div class="overflow-hidden">
    <div class="flex items-center justify-center h-[100px] text-4xl">DALL-E3</div>
    <div class="tab">
      <!--tabs切换 -->
      <n-tabs animated size="large" justify-content="center" @update:value="changeTabs">
        <n-tab-pane name="create">
          <template #tab>
            <div class="tab-title">
              <n-icon class="icon" size="30"><CreateOutline /> </n-icon>
              <span>创建绘画</span>
            </div>
          </template>
          <!-- 左边准备生成的的操作 -->
          <n-card>
            <div class="case lg:flex lg:justify-between xl:w-[1440px] xl:mx-auto xl:my-0">
              <div class="left lg:w-[70%]">
                <div class="md:flex w-full xl:flex lg:h-full">
                  <div class="md:mr-[10px] md:w-[50%] xl:w-[50%] lg:hidden xl:block">
                    <img class="w-full h-full rounded-lg" :src="yuhangyuan" />
                  </div>
                  <div
                    class="mt-[10px] md:w-[50%] lg:w-full xl:w-[50%] xl:grid md:mt-0 grid grid-cols-2 gap-[10px]"
                  >
                    <div>
                      <img class="w-full h-full rounded-lg" :src="getAssetsFile('boy.png')" />
                    </div>
                    <div class="">
                      <img class="w-full h-full rounded-lg" :src="main" />
                    </div>
                    <div>
                      <img class="w-full h-full rounded-lg" :src="carton_boy" />
                    </div>
                    <div class="">
                      <img class="w-full h-full rounded-lg" :src="girl" />
                    </div>
                  </div>
                </div>
                <div></div>
              </div>
              <div class="right lg:w-[25%]">
                <n-form
                  ref="formRef"
                  label-placement="top"
                  :label-width="80"
                  :model="formValue"
                  :rules="rules"
                >
                  <div class="my-[20px] lg:mt-0">
                    <n-card>
                      <div class="h-[250px]">
                        <n-form-item label="模型" path="model">
                          <n-select
                            v-model:value="formValue.model"
                            :options="modelOptions"
                            @update:value="changeModel"
                          />
                        </n-form-item>
                        <n-form-item label="图片尺寸" path="size">
                          <n-select
                            v-model:value="formValue.size"
                            :options="sizeOptions"
                          ></n-select>
                        </n-form-item>
                        <n-form-item label="图片数量" path="imgNumber">
                          <n-input-number
                            v-model:value="formValue.imgNumber"
                            clearable
                            :min="min"
                            :max="max"
                          />
                        </n-form-item>
                      </div>
                    </n-card>
                  </div>
                  <div class="mb-[20px]">
                    <n-card>
                      <div class="">
                        <n-form-item label="图片描述" path="description">
                          <n-input
                            v-model:value="formValue.description"
                            type="textarea"
                            placeholder="图片的描述词"
                            maxlength="800"
                            size="large"
                            show-count
                          />
                        </n-form-item>
                      </div>
                    </n-card>
                  </div>
                  <div class="w-full">
                    <n-button
                      :loading="isLoading"
                      color="#8a2be2"
                      :block="true"
                      round
                      @click="submit"
                    >
                      <template #icon>
                        <n-icon>
                          <ArrowAutofitUp20Regular />
                        </n-icon>
                      </template>
                      提交绘画任务
                    </n-button>
                  </div>
                </n-form>
              </div>
            </div>
          </n-card>
        </n-tab-pane>
        <n-tab-pane name="history">
          <template #tab>
            <div class="tab-title">
              <n-icon class="icon" size="30"><History16Regular /> </n-icon>
              <span>历史记录</span>
            </div>
          </template>
          <!-- 右边历史记录的消息，瀑布流 -->
          <!--  -->
          <div id="scroll__list" ref="scroll__list2">
            <Waterfall ref="waterfall" :list="cardList">
              <template #item="{ item }">
                <n-card hoverable class="card">
                  <n-image @load="loadImg()" :src="item.url"></n-image>
                </n-card>
              </template>
            </Waterfall>
          </div>
        </n-tab-pane>
      </n-tabs>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, Ref } from "vue";
import { ArrowAutofitUp20Regular, History16Regular } from "@vicons/fluent";
import { CreateOutline } from "@vicons/ionicons5";
import { Waterfall } from "vue-waterfall-plugin-next";
import { createImg, getDallE3List } from "@/api/dalle3/index";
import { getAssetsFile } from "@/utils/imageUrl/getUrl";
import { useNotification } from "naive-ui";
import main from "@/assets/main.png";
import yuhangyuan from "@/assets/yuhangyuan.png";
import carton_boy from "@/assets/carton_boy.png";
import girl from "@/assets/girl.png";

const notification = useNotification();
interface SizeType {
  label: string;
  value: string;
  disabled?: boolean;
}
const waterfall: any = ref(null);
const scroll__list2: any = ref(null);
let page = ref(1);
let pageSize = ref(50);
let totalPage = ref(1);
let min = ref(1);
let max = ref(10);
let isLoading = ref(false);
let cardList = ref([]);
let formRef: any = ref(null);
let formValue = ref({
  model: "1",
  size: "1",
  imgNumber: 1,
  description: "",
});
let rules = {
  imgNumber: {
    required: true,
    type: "number",
    trigger: ["blur"],
    message: "数量不能为空",
  },
  description: {
    required: true,
    trigger: ["blur"],
    message: "生成图片的描述词不能为空",
  },
};

let modelOptions = ref([
  {
    label: "DALL.E2",
    value: "1",
  },
  {
    label: "DALL.E3",
    value: "2",
  },
]);
let sizeOptions: Ref<Array<SizeType>> = ref([
  {
    label: "256x256",
    value: "1",
  },
  {
    label: "512x512",
    value: "2",
  },
  {
    label: "1024x1024",
    value: "3",
  },
]);
function loadImg() {
  waterfall.value?.renderer();
}
function changeModel(event: any) {
  console.log(event);
  if (event == 1) {
    max.value = 10;
    formValue.value.size = "1";
    sizeOptions.value = [
      {
        label: "256x256",
        value: "1",
      },
      {
        label: "512x512",
        value: "2",
      },
      {
        label: "1024x1024",
        value: "3",
      },
    ];
  }
  if (event == 2) {
    max.value = 1;
    formValue.value.imgNumber = 1;
    formValue.value.size = "3";

    sizeOptions.value = [
      {
        label: "1024x1024",
        value: "3",
        disabled: true,
      },
      {
        label: "1792x1024",
        value: "4",
        disabled: true,
      },
      {
        label: "1024x1792",
        value: "5",
        disabled: true,
      },
    ];
  }
}
function submit(e: MouseEvent) {
  e.preventDefault();
  isLoading.value = true;
  formRef.value?.validate((errors: any) => {
    if (!errors) {
      let data = {
        model: formValue.value.model,
        size: formValue.value.size,
        prompt: formValue.value.description,
        n: formValue.value.imgNumber,
      };
      createImg(data).then((res) => {
        console.log("res", res);
        isLoading.value = false;
        if (res.code != 500) {
          notification.create({
            title: "生成绘画任务成功",
            content: `请注意，创建的绘画任务，请稍等一会儿去历史记录查看，任务已经生成，生成需要几分钟，请耐心等待一下`,
            meta: "AI绘画",
            duration: 5000,
          });
        } else {
          notification.create({
            title: "系统错误，请稍后重试",
            duration: 5000,
          });
        }
      });
    } else {
      isLoading.value = false;
    }
  });
}
function changeTabs(value: string) {
  console.log(value);
  if (value == "history") {
    page.value = 1;
    pageSize.value = 50;
    getDallList();
  }
}
function getDallList() {
  let data = {
    pageNum: page.value,
    pageSize: pageSize.value,
  };
  getDallE3List(data).then((res) => {
    cardList.value = cardList.value.concat(res.rows);
    totalPage.value = Math.ceil(res.total / 50);
    scroll__list2.value?.addEventListener("scroll", doScroll);
  });
}

function doScroll() {
  // console.log(scroll__list2.value);
  let scrollHeight = scroll__list2.value.scrollHeight; //251
  let scrollTop = scroll__list2.value.scrollTop; //0-18
  let clientHeight = scroll__list2.value.clientHeight; //233
  if (scrollHeight - clientHeight == scrollTop) {
    //滚动条滚到最底部
    if (page.value >= totalPage.value) return;
    page.value++;
    getDallList();
  }
}
/* onMounted(()=>{
  nextTick(()=>{
  console.log(scroll__list2.value);
    // scroll__list.value?.addEventListener('scroll', doScroll)
  })
}) */
</script>
<style scoped>
.tips {
  background-color: #ccc;
}
.tab-title {
  display: flex;
  align-items: center;
  justify-content: center;
}
.animate__animated {
  animation-fill-mode: both;
  animation-duration: 1s;
}
#scroll__list {
  overflow-y: auto;
  height: calc(100vh - 172px);
}
.card {
  border-radius: 10px;
}
/* .auto__index {
  margin: 0 auto;
} */
</style>
